<template>
  <!-- 歌手 内容组件 -->
  <div>
    <ul class="star-list">
      <li class="star-item" v-for="(star, idx) in stars" :key="idx">
        <a
          target="_blank"
          :href="`https://baike.baidu.com/item/${star.name}`"
          class="star-icon"
          ><img :src="star.src" :alt="star.name"
        /></a>
        <div class="star-name" v-text="star.name"></div>
      </li>
    </ul>

    <!-- 展示更多内容 -->
    <a
      v-show="!fullscreenLoading"
      @click.prevent="moreHandler"
      title="点击加载更多"
      class="more"
      >点击加载更多...</a
    >
  </div>
</template>

<script>
export default {
  name: "StarList",
  data() {
    return {
      stars: [
        {
          src: "https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001145/18c4/8e32/740d/b2bb193fc47bc971ec683654e046e8ec.png?imageView&thumbnail=198x198&type=webp",
          name: "刘思鉴",
        },
        {
          src: "https://img01.dmhmusic.com/0206/M00/70/D3/ChR47FtM6zuAd4cPAALIQN9yml0668.jpg@w_200,h_200",
          name: "林俊杰",
        },
        {
          src: "https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001107/e40c/26a5/ef93/f3b555c6b96865270de99103747270b7.png?imageView&thumbnail=198x198&type=webp",
          name: "花粥",
        },
        {
          src: "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001165/dbee/c6e0/1f49/c3972188c1072b86b5c91b24e5c78217.png?imageView&thumbnail=198x198&type=webp",
          name: "落日飞车",
        },
        {
          src: "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001060/1e8e/f1fe/1338/3f4b4b9fce5d1ac7eecf8bb809b7b644.png?imageView&thumbnail=198x198&type=webp",
          name: "房东的猫",
        },
        {
          src: "https://img01.dmhmusic.com/0206/M00/70/DC/ChR47FtM67aAFavgAAKantb6e5o708.jpg@w_200,h_200",
          name: "方大同",
        },
        {
          src: "https://img01.dmhmusic.com/0105/M00/E0/75/ChR45GKUdCeAFgPbAAr8EfXS3NY440.jpg@w_200,h_200",
          name: "徐佳莹",
        },
        {
          src: "https://img01.dmhmusic.com/0206/M00/70/E2/ChR47FtM6_qAYdtpAAJgVE2U6UI268.jpg@w_200,h_200",
          name: "许嵩",
        },
        {
          src: "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001214/8e29/c1d2/6a9c/4f636aa75bd0787039b5528d1084fd54.png?imageView&thumbnail=198x198&type=webp",
          name: "颜人中",
        },
        {
          src: "https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4622001012/1a24/1606/b1c9/25ae12cf060dc89acbdd3c8e72dfbce4.png?imageView&thumbnail=198x198&type=webp",
          name: "阿冗",
        },
      ],
      fullscreenLoading: false,
    };
  },
  methods: {
    /* 展示更多内容业务处理 */
    moreHandler() {
      this.fullscreenLoading = true;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.stars = [...this.stars, ...this.stars];
        loading.close();
        this.$message({
          message: "加载成功！",
          type: "success",
          showClose: true,
        });
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.star-list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .star-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    &:hover {
      color: #ffcff1;
    }
    .star-icon {
      width: 3.5rem;
      height: 3.5rem;
      overflow: hidden;
      border-radius: 50%;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .star-name {
      margin-top: 0.2rem;
      margin-bottom: 0.5rem;
    }
  }
}
.more {
  cursor: pointer;
  margin: 0 auto;
  width: 3rem;
  display: block;
  padding-bottom: 0.5rem;
  color: rgb(167, 167, 167);
}
</style>